<template>
  <el-scrollbar class="app-container" ref="container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
      <el-form-item label="成果图类型" prop="type">
        <el-select v-model="queryParams.type">
          <el-option v-for="item in templateType" :key="item.value" :label="item.name" :value="item.value" clearable>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-divider></el-divider>

    <el-tabs v-model="activeName" type="card" @tab-change="tabChange" ref="tabs">
      <el-tab-pane label="待审核" name="1">
        <el-row :gutter="10" class="mb8" style="float:left">
          <el-col :span="1.5">
            <el-button type="primary" icon="Edit" @click="batchExamine">批量审核</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" icon="Message" @click="emailManage">邮箱管理</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="dataList" @selection-change="selectChange" stripe ref="table1">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="成图编号" align="center" prop="number" />
          <el-table-column label="省" align="center" prop="province" />
          <el-table-column label="市" align="center" prop="city" />
          <el-table-column label="区县" align="center" prop="county" />
          <el-table-column label="成果图类型" align="center" prop="type">
            <template #default="{ row }">
              <span>{{ templateType.find(item => item.value == row.type)?.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="震级" align="center" prop="mm" />
          <el-table-column label="提交时间" align="center" prop="submitTime" />
          <el-table-column label="制图员" align="center" prop="drawer" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button type="text" @click="examine(row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination style="margin-top: 15px" v-show="queryParams.total > 0" :total="queryParams.total"
          v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" ref="pagination1" />
      </el-tab-pane>
      <el-tab-pane label="审核不通过" name="2">
        <el-row :gutter="10" class="mb8" style="float:left">
          <el-col :span="1.5">
            <el-button type="primary" icon="Message" @click="emailManage">邮箱管理</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="dataList" @selection-change="selectChange" stripe ref="table2">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="成图编号" align="center" prop="number" />
          <el-table-column label="省" align="center" prop="province" />
          <el-table-column label="市" align="center" prop="city" />
          <el-table-column label="区县" align="center" prop="county" />
          <el-table-column label="成果图类型" align="center" prop="type">
            <template #default="{ row }">
              <span>{{ templateType.find(item => item.value == row.type)?.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="震级" align="center" prop="mm" />
          <el-table-column label="提交时间" align="center" prop="submitTime" />
          <el-table-column label="制图员" align="center" prop="drawer" />
          <el-table-column label="审核时间" align="center" prop="checkTime" />
          <el-table-column label="审核员" align="center" prop="checkUser" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button type="text" @click="viewExamine(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination style="margin-top: 15px" v-show="queryParams.total > 0" :total="queryParams.total"
          v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" ref="pagination2" />
      </el-tab-pane>
      <el-tab-pane label="审核通过" name="3">
        <el-row :gutter="10" class="mb8" style="float:left">
          <el-col :span="1.5">
            <el-button type="primary" icon="Download" @click="batchDownload">批量下载</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" icon="Message" @click="emailManage">邮箱管理</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="dataList" @selection-change="selectChange" stripe ref="table3">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="成图编号" align="center" prop="number" />
          <el-table-column label="省" align="center" prop="province" />
          <el-table-column label="市" align="center" prop="city" />
          <el-table-column label="区县" align="center" prop="county" />
          <el-table-column label="成果图类型" align="center" prop="type">
            <template #default="{ row }">
              <span>{{ templateType.find(item => item.value == row.type)?.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="震级" align="center" prop="mm" />
          <el-table-column label="提交时间" align="center" prop="submitTime" />
          <el-table-column label="制图员" align="center" prop="drawer" />
          <el-table-column label="审核时间" align="center" prop="checkTime" />
          <el-table-column label="审核员" align="center" prop="checkUser" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button type="text" @click="viewResultImg(row.attachId)">查看</el-button>
              <el-button type="text" @click="downloadItem(row.attachId)">下载图片</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination style="margin-top: 15px" v-show="queryParams.total > 0" :total="queryParams.total"
          v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" ref="pagination3" />
      </el-tab-pane>
    </el-tabs>
    <!-- 审核、批量审核、审核不通过查看 -->
    <Examine v-model:open="examineOpen" :data="curItem" v-model:examineType="examineType" @examineSuccess="getList" />
    <!-- 审核通过查看 -->
    <ViewResultImage v-model:open="resultImgOpen" :attachId="viewAttachId" />
    <!-- 邮箱管理 -->
    <EmailManage v-model:open="emailOpen" />
  </el-scrollbar>
</template>
<script setup name="achievementReview">
import Examine from '@/views/quickMapping/common/examine'
import { templateType } from '@/views/quickMapping/common/const'
import { getAll } from '@/api/quickMapping/quickMapping/resultManage'
import ViewResultImage from '@/views/quickMapping/common/viewResultImage'
import EmailManage from './emailManage.vue'

const { proxy } = getCurrentInstance()
const queryParams = ref({
  page: 1,
  rows: 10,
  total: 0
})
const activeName = ref('1')
const tabChange = () => {
  queryParams.value.total = 0
  getList()
}
onMounted(() => {
  getList()
})
// 邮箱管理
const emailOpen = ref(false)
const emailManage = () => {
  emailOpen.value = true
}
const loading = ref(false)
const dataList = ref([])
// 查询
const getList = () => {
  loading.value = true
  getAll({ ...queryParams.value, status: activeName.value }).then(res => {
    dataList.value = res.data.rows
    loading.value = false
    queryParams.value.total = res.data.total
  })
}
// 重置
const resetQuery = () => {
  queryParams.value.page = 1
  proxy.resetForm('queryRef')
  getList()
}

// 多选
const ids = ref([])
const attachIds = ref([])
const selectChange = (selection) => {
  ids.value = selection.map(item => item.id)
  attachIds.value = selection.map(item => item.attachId)
}

// 审核
const examineOpen = ref(false)
const curItem = ref({})
const examineType = ref()  // 1 审核不通过
const examine = (row) => {
  examineOpen.value = true
  curItem.value = row
}
// 批量审核
const batchExamine = () => {
  if (ids.value.length === 0) {
    proxy.$modal.msgWarning('请选择一条数据')
    return
  }
  examineOpen.value = true
  curItem.value = ids.value
}
// 审核不通过-查看
const viewExamine = (row) => {
  examineOpen.value = true
  curItem.value = row
  examineType.value = '1'
}
// 审核通过-查看
const resultImgOpen = ref(false)
const viewAttachId = ref('')
const viewResultImg = (attachId) => {
  resultImgOpen.value = true
  viewAttachId.value = attachId
}
// 下载图片
const downloadItem = (attachId) => {
  location.href = `${import.meta.env.VITE_APP_BASE_API}/attachment/downLoadFile?attachId=${attachId}`
}
// 批量下载
const batchDownload = () => {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据！')
    return
  }
  proxy.download("/attachment/downForZip/" + attachIds.value, {}, '快速出图成果审核.zip')
}
</script>
<style scoped lang="scss">
.app-container {
  height: 100%;
  min-height: 400px;
  overflow: auto;

  :deep(.el-tabs__content) {
    height: calc(100% - 55px);
  }
}
</style>